<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
	


<h:head>
	<title>Zumeh: Create user</title>
	Welcome to Zumeh App!
	<br> </br>
</h:head>

<h:body>

	<style type="text/css">
.ui-widget {
	font-size: 14px !important;
}
</style>

	<p:panel columns="1">
		<h:outputLabel value="Create a new Zumeh user" />
	</p:panel>
	<br />

	<p:panel>
	<h:form>
	
	If you already have a Zumeh's account , you can login here.
	
	
	<h:outputLink id="loginLink" value="javascript:void(0)"
			onclick="dlg.show()" title="login">
			<p:graphicImage value="/images/Login.png" />
		</h:outputLink>

		<p:growl id="growl" showDetail="true" life="3000" />

		<p:dialog id="dialog" header="Login" widgetVar="dlg">
			<h:form >

				<h:panelGrid columns="2" cellpadding="5">
					<h:outputLabel for="login" value="Login:" />
					<p:inputText value="#{userBean.login}" id="login" required="true"
						label="login" />

					<h:outputLabel for="password" value="Password:" />
					<h:inputSecret value="#{userBean.password}" id="password"
						required="true" label="password" />

					<f:facet name="footer">
						<p:commandButton id="loginButton" value="Login" update=":growl"
							action="#{userBean.verifyUser}"
							 />
					</f:facet>
				</h:panelGrid>

			</h:form>
		</p:dialog>

		<script type="text/javascript">
		function handleLoginRequest(xhr, status, args) {
			if (args.validationFailed || !args.loggedIn) {
				jQuery('#dialog').effect("shake", {
					times : 3
				}, 100);
			} else {
				dlg.hide();
				jQuery('#loginLink').fadeOut();
			}
		}
	</script>
	</h:form>
	</p:panel>

	<h:form  enctype="multipart/form-data">
		<p:growl id="growl" showDetail="true" sticky="true" />
		<br />

		<p:panel columns="4">
			<h:panelGrid columns="3" cellpadding="3">

				<h:outputLabel for="firstName" value="First Name: *" />
				<p:inputText id="firstName" value="#{userBean.firstName}"
					required="true" requiredMessage="please, insert your first name"
					maxlength="50" >
					<f:validateLength minimum="5" /> 
					<p:ajax event="blur" update="msg_first" />
				</p:inputText>  
            	<p:message id="msg_first" for="firstName" display="icon"/> 

				<h:outputLabel for="lastName" value="Last Name: *" />
				<p:inputText id="lastName" value="#{userBean.lastName}"
					required="true" requiredMessage="please, insert your last name"
					maxlength="50" >
					<f:validateLength minimum="5" /> 
					<p:ajax event="blur" update="msg_last" />
				</p:inputText>
				<p:message id="msg_last" for="lastName" display="icon"/> 


				<h:outputLabel for="login" value="Login: *" />
				
				<p:inputText id="login" value="#{userBean.login}" required="true"
					requiredMessage="please, insert your login" maxlength="50" />
				
				<p:commandButton id="loginButton" value="availability" update=":growl"
					actionListener="#{userBean.isLoginAvailable}" 
					oncomplete="handleLoginRequest(xhr, status, args)"
					title="Verify if this login is available"/>	
				
				<h:message for="login" />
				
				
				
					<!-- <p:commandButton id="loginButton" value="Login" update=":growl"
							actionListener="#{usuarioBean.efetuarLogin}"
							oncomplete="handleLoginRequest(xhr, status, args)" -->
				
				
				<br/>
			</h:panelGrid>

					

					<h:panelGrid columns="2" id="matchGrid">
						<h:outputLabel for="pwd1" value="Password: *" />
						<p:password id="pwd1" value="#{userBean.password}" match="pwd2"
							label="Password 1" required="true" />

						<h:outputLabel for="pwd2" value="Repeat Password: *" />
						<p:password id="pwd2" value="#{userBean.password}"
							feedback="false" label="Password 2" required="true" />
					</h:panelGrid>
					
					<h:panelGrid>

					<br />
					<h:outputLabel for="email" value="Email: *" />
					<p:inputText id="email" value="#{userBean.email}" required="true"
						requiredMessage="please, insert your email" maxlength="50" >
					<f:validateLength minimum="6" /> 
					<p:ajax event="blur" update="msg_first" listener="#{userBean.verifyEmail}"/>
				</p:inputText>  
            	<p:message id="msg_email" for="email" display="icon"/> 

					<h:outputLabel for="local" value="Location: " />
					<p:selectOneMenu id="local" value="#{userBean.local}">
						<f:selectItem noSelectionOption="true" itemValue=""
							itemLabel="--Select--" />
						<f:selectItem itemValue="brazil" itemLabel="Brazil" />
						<f:selectItem itemValue="eua" itemLabel="EUA" />
					</p:selectOneMenu>
					<h:message for="local" />
					
					<h:outputText value="Date: " />  
            		<p:inputMask value="#{userBean.birthDay}" mask="99/99/9999"/> 

					<h:outputText value="Gender: " />
					<p:selectOneRadio id="gender" value="#{userBean.gender}">
						<f:selectItem itemLabel="Male" itemValue="Male" />
						<f:selectItem itemLabel="Female" itemValue="Female" />
					</p:selectOneRadio>

					<br />
					<h:outputText value="About You: " />
					<p:inputTextarea id="inputarea" rows="5" cols="30"
						value="#{userBean.aboutMe}" />
						
					<br/>

			</h:panelGrid>
			
			<p:messages showDetail="true" autoUpdate="true" />
			
			<br/>
			
			<p:commandButton value="Create my account" ajax="false" update="table"
					action="#{userBean.saveUser}"/>	
			
			<br></br>

		</p:panel>

	</h:form>
	
	<br/>

		<script type="text/javascript">  
    function handleLoginRequest(xhr, status, args) {  
        if(args.validationFailed || !args.loggedIn) {  
            jQuery('#dialog').effect("shake", { times:3 }, 100); 
            
        } else {  
            dlg.hide();  
            jQuery('#loginLink').fadeOut();  
        }  
    }  
</script>




</h:body>


</html>